<template data-variants-form-target="optionValueTemplate">
  <span class="badge badge-light" data-slot="optionValueName"></span>
</template>
<template data-variants-form-target="optionTemplate">
  <div class="options-creator__option" data-variants-form-target="option">
    <% if can?(:manage_option_types, @product)  %>
      <button class="draggable" type="button">
        <i class="ti ti-grip-vertical"></i>
      </button>
    <% end %>
    <div class="w-100">
      <div class="d-flex justify-content-between">
        <h6 data-slot="optionName"></h6>
        <% if can?(:manage_option_types, @product) %>
          <button class="btn btn-light btn-sm" type="button" data-action="variants-form#editOption" data-variants-form-option-id-param=""><%= Spree.t(:edit) %></button>
        <% end %>
      </div>
      <div data-slot="optionValuesContainer"></div>
    </div>
  </div>
</template>
<template data-variants-form-target="optionFormTemplate">
  <div class="options-creator__option options-creator__option--form" data-slot="optionForm">
    <div class="w-100">
      <div class="form-group">
        <label class="label" for="option_name"><%= Spree.t(:option_name) %></label>
        <%= tom_select_tag :option_name,
          multiple: false,
          create: true,
          preloaded_options: option_types_for_select,
          include_blank: true,
          select_data: {
            action: "variants-form#handleSelectedOptionName tomSelectInitialized->variants-form#refreshOptionNameSelect"
          } %>
      </div>
      <div class="form-group">
        <span class="label"><%= Spree.t(:option_values) %></span>
        <div data-controller="multi-tom-select" class="values-inputs" data-variants-form-target="newOptionValuesSelectContainer" data-slot="optionValuesSelectContainer">
          <%= tom_select_tag "new_option_values[]",
            template: true,
            multiple: false,
            create: true,
            include_blank: true,
            data: {
              multi_tom_select_target: "selectTemplate"
            },
            select_data: {
              variants_form_target: "newOptionValuesSelect",
              action: "multi-tom-select#handleSelect keydown.enter->variants-form#handleNewOption:prevent"
            } %>
        </div>
      </div>
      <div class="d-flex justify-content-between">
        <button class="btn btn-danger btn-outline btn-sm" data-action="variants-form#discardOption" data-variants-form-option-id-param="" type="button"><%= Spree.t('actions.destroy') %></button>
        <button class="btn btn-primary btn-sm" data-variants-form-option-id-param="" data-action="variants-form#saveOption" type="button"><%= Spree.t(:done) %></button>
      </div>
    </div>
  </div>
</template>
